<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4609743_bynjew5x6kh.css">
    <title>Document</title>
</head>

<body>
    <div id="main">
        <div class="icon"></div>
        <div id="app" class="left">
            <div class="left-top">
                <p v-show="show===1">扫描二维码登录</p>
                <p v-show="show===3">扫码下载客户端</p>
            </div>
            <div class="app-1">
                <div @mouseover="show=2" @mouseout="show=1" class="image">
                    <img v-show="show===1" src="./img/下载 (3).png" alt="">
                    <img v-show="show===2" src="./img/qr-tips.74063ae1.png" alt="" width="310px" height="auto">
                    <img v-show="show===3" src="./img/QRcode.png" alt="" width="210px" height="210px">
                </div>
            </div>
            <div class="left-bottom">
                <p>请使用<a @mouseover="show=3" @mouseout="show=1" href="https://app.bilibili.com/?spm_id_from=333.1007.0.0" >哔哩哔哩客户端</a></p>
                <p>扫码登录或扫码下载APP</p>
            </div>
        </div>
        <div class="middle">
        </div>
        <div class="right">
            <div id="app2">
                <div class="buttons">
                    <button style="cursor: pointer;" @click="button=1" :class="{'blue' :button===1}">密码登录</button>
                    <div class="strong"></div>
                    <button style="cursor: pointer;" @click="button=2" :class="{'blue' :button===2}">短信登录</button>
                </div>

                <div class="tab" v-if="button===1">
                    <div class="input1">
                        <div class="input1-top">
                            <div class="number">账号</div>
                            <input type="text" placeholder="请输入账号">
                        </div>
                        <div class="line"></div>
                        <div class="input1-bottom">
                            <div class="number">密码</div>
                            <input @focus="pitch=1" @blur="pitch=2" :type="displayThePassword?'text':'password'"
                                placeholder="请输入密码">
                            <div class="icon-1">
                                <span class="iconfont icon-yincang"
                                    @click="conceal=1;displayThePassword=!displayThePassword"
                                    v-show="conceal===2"></span>
                                <span class="iconfont icon-xianshi"
                                    @click="conceal=2;displayThePassword=!displayThePassword"
                                    v-show="conceal===1"></span>
                            </div>
                            <div class="forget">忘记密码</div>
                        </div>
                    </div>
                    <div class="input1-btn">
                        <div class="btn-1"><button @click="button=2">注册</button></div>
                        <div class="btn-2"><button>登录</button></div>
                    </div>
                </div>
                <div class="tab" v-if="button===2">
                    <div class="input1">
                        <div class="input1-bottom">
                            <div class="number-1 number-2" @click="appear=!appear">{{phone[moren].hao}}
                                <img src="./img/select_arrow.ce6b4ad2.svg" alt="">
                            </div>
                            <div class="region">
                                <div class="cell" v-show="appear" @click="moren=index,appear=false"
                                    v-for="(item,index) in phone">
                                    <span style="margin-left: 10px;">{{item.name}}</span> <span
                                        style="margin-right: 10px;">{{item.hao}}</span>
                                </div>
                            </div>
                            <input class="input-1" type="text" placeholder="请输入手机号">
                            <div class="string"></div>
                            <div class="gain">获取验证码</div>
                        </div>
                        <div class="line"></div>
                        <div class="input1-top">
                            <div class="number">验证码</div>
                            <input type="text" @focus="pitch=1" @blur="pitch=2" placeholder="请输入验证码">
                        </div>
                    </div>
                    <div class="input1-btn btn-3">
                        <div class="btn-2"><button>登录/注册</button></div>
                    </div>
                </div>
                <div class="login">
                    <div class="login-top">其他方式登录</div>
                    <div class="login-bottom">
                        <div class="top-1">
                            <a href="">
                                <img src="./img/下载.png" alt="">
                                <div class="span">微信登录</div>
                            </a>
                        </div>
                        <div class="top-1">
                            <a href="">
                                <img src="./img/下载 (1).png" alt="">
                                <div class="span">微博登录</div>
                            </a>
                        </div>
                        <div class="top-1">
                            <a href="">
                                <img src="./img/下载 (2).png" alt="">
                                <div class="span">QQ登录</div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="app2-bottom">
                    <div class="app2-left">
                        <img v-show="pitch===1" src="./img/22_close.9382a5a8.png" alt="">
                        <img v-show="pitch===2" src="./img/22_open.4ea5f239.png" alt="">
                    </div>
                    <div class="app2-right">
                        <img v-show="pitch===1" src="./img/33_close.a8c18fc8.png" alt="">
                        <img v-show="pitch===2" src="./img/33_open.f7d7f655.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="jurisdiction">
            <p> 未注册过哔哩哔哩的手机号，我们将自动帮你注册账号 </p>
            <p> 登录或完成注册即代表你同意 <a href=""> 用户协议 </a>和<a href=""> 隐私政策 </a></p>
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            let show = ref(1)
            return {
                show,
            }
        }
    }).mount('#app')
    createApp({
        setup() {
            let button = ref(1)
            let blue = ref('blue')
            let pitch = ref(2)
            let conceal = ref(2)
            let appear = ref(false)
            let moren = ref(0)
            let phone = ref([{
                name: '中国内陆',
                hao: '+86'
            }, {
                name: '中国香港特别行政区',
                hao: '+852'
            }, {
                name: '中国澳门特别行政区',
                hao: '+853'
            }, {
                name: '中国台湾',
                hao: '+886'
            }, {
                name: '美国',
                hao: '+1'
            }, {
                name: '比利时',
                hao: '+32'
            }])
            return {
                button,
                blue,
                pitch,
                conceal,
                appear,
                phone,
                moren
            }
        }
    }).mount('#app2')
</script>

</html>